<template>
  <div class="register_bg theme_body">
    <div class="register_header">
      <h1>大宗建材服务平台<span>供应商注册</span></h1>
    </div>
    <div class="box" v-if="!isMask">
      <div class="register_box">
        <div class="register_left">
          <el-form style="width: 100%; margin-top: 5px" class="wholeForm" @submit.native.prevent label-width="100px">
            <el-form-item :required="true" label="用户名">
              <el-input size="small" v-model.trim="registerData.userName"></el-input>
            </el-form-item>
            <el-form-item :required="true" label="密码">
              <el-input
                size="small"
                show-password
                v-model.trim="registerData.password"
                auto-complete="new-password"
              ></el-input>
            </el-form-item>
            <el-form-item :required="true" label="确认密码">
              <el-input
                size="small"
                show-password
                v-model.trim="registerData.confirmPassword"
                auto-complete="new-password"
              ></el-input>
            </el-form-item>
            <el-form-item :required="true" label="图形验证码">
              <el-input
                style="width: 170px; float: left"
                size="small"
                v-model.trim="registerData.imageVerification"
              ></el-input>
              <img @click="getImgCode" class="img_code" :src="img" alt="" />
            </el-form-item>
            <el-form-item :required="true" label="手机号">
              <el-input size="small" v-model.trim="registerData.phone"></el-input>
            </el-form-item>
            <el-form-item class="no_border" :required="true" label="验证码">
              <el-input size="small" v-model.trim="registerData.smsVerification">
                <el-button @click="getCode" slot="append">{{ codeText }}</el-button>
              </el-input>
            </el-form-item>
            <el-form-item label="">
              <el-checkbox v-model.trim="checked"
                >我已阅读并同意 <span style="color: #fa7355">《用户服务协议》</span></el-checkbox
              >
            </el-form-item>
            <el-form-item label="">
              <button class="register_btn" @click="registerBtn">立&nbsp;即&nbsp;注&nbsp;册</button>
            </el-form-item>
          </el-form>
        </div>
        <div class="register_right">
          <h3>如果您已注册，<span @click="goLogin">点击这里登录</span></h3>
          <h4>企业注册须知：</h4>
          <div class="text_box">
            <p>1. 完成账号注册后，需要完成企业认证成为认证用户，才能进行各项业务操作！</p>
            <p>2. 在注册或者认证过程中如果还有问题请联系客服，客服电话：xxxxxx，公司客服会协助您完成注册。</p>
            <p>3. 客服工作时间：周一至周五 8:30-17:30，周六、周日 9:00-17:00。</p>
          </div>
        </div>
      </div>
    </div>
    <div class="registerOk" v-else>
      <i class="iconfont icon-duihao"></i>
      <p>注册成功，恭喜您成为大宗建材平台的用户！</p>
      <div>
        <button class="left" @click="goPerfectInfo">完善企业资料</button>
        <button class="right" @click="goHome">前往首页</button>
      </div>
    </div>
  </div>
</template>

<script>
import socketMixin from '../mixins/socketMixin'
export default {
  name: 'Login',
  components: {},
  data() {
    return {
      code: '',
      codeText: '获取验证码',
      registerData: {
        phone: '',
        userName: '',
        password: '',
        confirmPassword: '',
        imageVerification: '',
        smsVerification: '',
        uid: ''
      },
      checked: false,
      img: '',
      isMask: false
    }
  },
  mixins: [socketMixin],
  methods: {
    //跳转登录页
    goLogin() {
      this.$router.push('/login')
    },
    //跳转信息完善页
    goPerfectInfo() {
      this.$router.push('/perfectInfo')
    },
    //跳转首页
    goHome() {
      this.$router.push('/')
    },
    //注册按钮事件
    registerBtn() {
      if (this.registerData.userName == '') {
        this.$message.error('请输入用户名！')
      } else if (this.registerData.password == '') {
        this.$message.error('请输入密码！')
      } else if (this.registerData.password != this.registerData.confirmPassword) {
        this.$message.error('两次密码不一致！')
      } else if (this.registerData.imageVerification == '') {
        this.$message.error('请输入图形验证码！')
      } else if (this.registerData.phone == '') {
        this.$message.error('请输入手机号！')
        // } else if (this.registerData.messageCode == "") {
        //   this.$message.error("请输入短信验证码！");
      } else if (!this.checked) {
        this.$message.error('请先阅读并同意用户服务协议！')
      } else {
        this.$https({
          method: 'post',
          url: '/sys/register',
          data: this.registerData
        })
          .then(res => {
            if (res.code === 0) {
              this.$message.success('注册成功')
              this.common.setCookie('materialsToken', res.data.tokenInfo.tokenValue, 360)
              localStorage.setItem('enterpriseId', res.data.enterpriseId)
              localStorage.setItem('biddingSwitch', res.data.biddingSwitch)
              localStorage.setItem('enterpriseName', res.data.enterpriseName)
              localStorage.setItem('userName', res.data.userName)
              localStorage.setItem('userId', res.data.tokenInfo.loginId)
              localStorage.setItem('enterpriseType', res.data.enterpriseType)
              this.$store.commit('setWhetherLogin', res.data.tokenInfo.tokenValue)
              this.$store.commit('setUserName', res.data.userName)
              this.$store.commit('setUserId', res.data.tokenInfo.loginId)
              this.initSocket()
              this.isMask = true
              this.$store.dispatch('getMenuList')
            } else {
              this.$message.error(res.msg)
            }
            this.getImgCode()
          })
          .catch(err => {
            console.log(err)
          })
      }
    },
    //获取图片验证码
    getImgCode() {
      this.$https({
        method: 'get',
        url: '/sys/captcha',
        data: {}
      })
        .then(res => {
          if (res.code === 0) {
            this.img = res.data.image
            this.registerData.uid = res.data.uid
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    //获取短信验证码
    getCode() {
      if (this.codeText == '获取验证码') {
        if (!this.common.fieldTest('phone', this.registerData.phone)) {
          this.$message.error('请填写正确的手机号码')
          return false
        }
        this.$https({
          method: 'post',
          url: '/user/smsCode.json',
          data: {
            phone: this.registerData.phone
          }
        })
          .then(res => {
            console.log(res)
            if (res.success) {
              this.$message.success('发送成功，请注意查收')
              var number = 60
              var times = setInterval(() => {
                if (number < 0) {
                  this.codeText = '获取验证码'
                  clearInterval(times)
                } else {
                  this.codeText = number + '秒后再发送'
                  number--
                }
              }, 1000)
            } else {
              this.$message.error(res.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      }
    }
  },
  mounted() {
    this.getImgCode()
  },
  created: function () {}
}
</script>
<style scoped lang="less">
.register_bg {
  width: 100%;
  background: url(../assets/register_bg.png) no-repeat;
  background-size: 100% 100%;
  background-position: center 0;

  .register_header {
    width: 100%;
    height: 13vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333333;
    border-bottom: 1px solid #ebebeb;
    h1 {
      text-align: left;
      width: 1200px;
      font-size: 2.4vw;
      font-weight: 500;
      span {
        font-size: 1.56vw;
        margin-left: 40px;
      }
    }
  }
  .box {
    display: flex;
    justify-content: center;
    margin-top: 50px;
  }
  .register_box {
    width: 1200px;
    height: 500px;
    display: flex;
    justify-content: space-between;
    .register_left {
      width: 370px;
      .register_btn {
        font-size: 2vh;
        width: 270px;
        height: 40px;
        background: #fa7355;
        border-radius: 5px;
        color: #fff;
        cursor: pointer;
      }
    }
    .register_right {
      width: 630px;
      margin-left: 200px;
      h3 {
        font-size: 18px;
        color: #333;
        font-weight: 400;
        padding-bottom: 15px;
        border-bottom: 1px solid #d6d6d6;
        span {
          color: #fa7355;
          cursor: pointer;
        }
      }
      h4 {
        font-size: 16px;
        color: #333;
        margin-top: 30px;
      }
      .text_box {
        margin-top: 20px;
        border: 1px solid #d6d6d6;
        padding: 0 20px 30px 20px;
        box-sizing: border-box;
        p {
          font-size: 14px;
          margin-top: 30px;
        }
      }
    }
  }
}
.img_code {
  cursor: pointer;
  width: 90px;
  float: left;
  margin-left: 10px;
  height: 32px;
  margin-top: 5px;
}
.registerOk {
  text-align: center;
  margin-top: 180px;
  .iconfont {
    color: #31be70;
    font-size: 36px;
  }
  p {
    margin-top: 30px;
    color: #333;
    font-size: 24px;
  }
  div {
    margin-top: 70px;
    .left {
      cursor: pointer;
      width: 180px;
      height: 32px;
      line-height: 32px;
      color: #fa7355;
      background-color: #fff;
      border: 1px solid #fa7355;
      border-radius: 5px;
    }
    .right {
      cursor: pointer;
      margin-left: 20px;
      width: 180px;
      height: 32px;
      line-height: 32px;
      color: #fff;
      background-color: #fa7355;
      border-radius: 5px;
    }
  }
}
</style>
